<template>
	<view class="fission_member">
		<view class="head_view" :style="{backgroundImage:'url('+headBg+')'}">
			<view class="money_v">¥{{have_money}}</view>
			<view class="h_p1">
				<view class="h_p1_tt">裂变收益</view>
				<view class="look_detail" @click="$util.redirectTo('/otherpages/fenxiao/fission_reward_details/fission_reward_details')">
					<view class="look_detail_name ">查看详情  ></view>
				</view>
			</view>
			<view class="head_line"></view>
			<view class="menuList">
				<view class="menu_item" v-for="(item,index) in headMenus" :key="index">
					<view class="menu_item_num">{{item.num}}</view>
					<view class="menu_item_name">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="fission_state">
			<view class="fission ing" :class="status === 0 ? 'select' :'normal'" @click="changeFission(0)">裂变中</view>
			<view class="fission ed" :class="status === 1 ? 'select' :'normal'" @click="changeFission(1)">已裂变</view>
		</view>
		<mescroll-uni @getData="getListData" @init="mescrollInit" class="member-point" ref="mescroll" :top="510">
			<view slot="list">
				<block v-if="listData.length > 0">
					<view class="list_view">
						<view class="item" v-for="(item,index) in listData" :key="index">
							<view class="fission_haves">
								<image :src="item.headimg ? $util.img(item.headimg) : $util.getDefaultImage().default_headimg"></image>
								<view class="fission_haves_info">
									<view class="haves_name">{{item.fenxiao_name}}</view>
									<view class="fission_time">{{$util.timeStampTurnTime(item.create_time)}}</view>
								</view>
							</view>
							<view class="fission_haves_item" v-for="(kitem,kindex) in item.info" :key="kindex">
								<view class="view2">
									<view class="info_view">
										<image :src="kitem.headimg ? $util.img(kitem.headimg) : $util.getDefaultImage().default_headimg"></image>
										<view class="view1">
											<view class="view1_t" :class="kitem.three_commission ? 'normal' : 'no_normal'">{{kitem.nickname}}</view>
											<view class="view1_time">{{$util.timeStampTurnTime(kitem.create_time)}}</view>
										</view>
									</view>
								</view>
								<view class="line" v-if="kindex != item.info.length - 1"></view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<ns-empty text="暂无相关数据" :isIndex="!1" :fixed="!1"></ns-empty>
				</block>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				headBg:this.$util.img('public/uniapp/h5/fenxiao/img/fission_member_head_icon.png'),
				headMenus:[{
					num:0,
					name:'裂变中'
				},
				{
					num:0,
					name:'已裂变'
				},
				{
					num:0,
					name:'今日新增'
				}],
				have_money:0,
				status:0,//0、裂变中；1、已裂变
				listData:[],
				mescroll:null,
			}
		},
		methods:{
			/* 裂变状态切换 */
			changeFission(status){
				this.status = status
				this.$refs.mescroll.refresh();
			},
			/* 获取头部信息 */
			getHeadData(){
				this.$api.sendRequest({
					url:'/fenxiao/api/Fission/fissionHead',
					async: true,
					success:res => {
						if(res.code == 0){
							this.headMenus[0].num = res.data.total
							this.headMenus[1].num = res.data.afission
							this.headMenus[2].num = res.data.today
							this.have_money = res.data.money
						}
					}
				})
			},
			/* 获取列表数据 */
			getListData(mescroll){
				this.mescroll = mescroll
				if (mescroll.num == 1) {
					this.listData = [];
				}
				this.getHeadData()
				this.$api.sendRequest({
					url:'/fenxiao/api/Fission/fissionInfo',
					data: {
						page: mescroll.num,
						page_size: mescroll.size,
						status: this.status,
					},
					async: true,
					success: res => {
						if (res.code == 0) {
							let newArr = [];
							newArr = res.data.list;
							for (let obj of newArr) {
								let arr = []
								let fission_num = res.data.fission_num;
								if(obj.info.length < fission_num && this.status == 0){
									for (let i = 0; i < fission_num - obj.info.length; i++) {
										arr.push({
											nickname:'待邀请',
											headimg:this.$util.img('public/uniapp/h5/fenxiao/img/fission_member_no_person_icon.png')
										})
									}
								}
								obj.info = obj.info.concat(arr)
							}
							mescroll.endSuccess(newArr.length);
							if (mescroll.num == 1) this.listData = []; //如果是第一页需手动制空列表
							this.listData = this.listData.concat(newArr); //追加新数据
						} else {
							// this.$util.showToast({
							// 	title: res.message
							// });
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail:res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.fission_member{
		padding: 30rpx;
		.head_view{
			background-size: cover;
			height: 336rpx;
			padding: 0rpx 48rpx;
			.money_v{
				padding-top: 48rpx;
				font-size: 48rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #463510;
				line-height: 67rpx;
			}
			.h_p1{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.h_p1_tt{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #5B4617;
					line-height: 33rpx;
				}
				.look_detail{
					display: flex;
					align-items: center;
					.look_detail_name{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #463510;
						line-height: 33rpx;
					}
				}
			}
			.head_line{
				margin-top: 30rpx;
				height: 1rpx;
				opacity: 0.3;
				background:#5B4617;
			}
			.menuList{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.menu_item{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 30%;
					height: 161rpx;
					.menu_item_num{
						font-size: 36rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #463510;
						line-height: 50rpx;
					}
					.menu_item_name{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #463510;
						line-height: 33rpx;
					}
				}
			}
		}
		.fission_state{
			display: flex;
			margin-top: 30rpx;
			height: 88rpx;
			.fission{
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #69511C;
				line-height: 40rpx;
				&.select{
					background: #C79F45;
					font-family: PingFangSC-Medium, PingFang SC;
				}
				&.normal{
					font-family: PingFangSC-Regular, PingFang SC;
					border: 1rpx solid #C79F45;
				}
			}
			.ing{
				border-radius: 16rpx 0rpx 0px 0px;
			}
			.ed{
				border-radius: 0px 16rpx 0px 0px;
			}
		}
		.list_view{
			padding: 0rpx 30rpx;
			.item{
				margin-bottom: 30rpx;
				background: #fff;
				border-radius: 16rpx;
				.fission_haves{
					display: flex;
					align-items: center;
					padding-left: 22rpx;
					height: 126rpx;
					background: #E9C87D;
					border-radius: 16rpx 16rpx 0rpx 0rpx;
					image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 40rpx;
					}
					.fission_haves_info{
						margin-left: 12rpx;
						.haves_name{
							font-size: 32rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #303133;
							line-height: 40rpx;
						}
						.fission_time{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #909399;
							line-height: 34rpx;
						}
					}
				}
				.fission_haves_item{
					padding: 0rpx 30rpx 0rpx 36rpx;
					.view2{
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 113rpx;
						.info_view{
							display: flex;
							image{
								width: 60rpx;
								height: 60rpx;
								border-radius: 30rpx;
							}
							.view1{
								margin-left: 18rpx;
								.view1_t{
									font-size: 28rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #303133;
									line-height: 40rpx;
									&.no_normal{
										margin-top: 10rpx;
									}
								}
								.view1_time{
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #909399;
									line-height: 34rpx;
						
								}
							}
						}
						.money_view{
							font-size: 32rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #C79F45;
							line-height: 45rpx;
						}
					}
					.line{
						height: 2rpx;
						background:#EBEBEB;
					}
				}
			}
		}
	}
</style>